<template>
    <component :is="handleMenu" :item="item" :full-path="fullPath">
      <template v-if="item.children">
        <vet-menu
          v-for="(route, index) in item.children"
          :key="index"
          :full-path="handlePath(item.path)"
          :item="route"
        />
      </template>
    </component>
  </template>
  
  <script lang="ts">
  import VetSubMenu from "./components/VetSubMenu.vue";
  import VetMenuItem from "./components/VetMenuItem.vue";
  import { computed, defineComponent } from "vue";
  import path from "path";
  
  export default defineComponent({
    components: { VetSubMenu, VetMenuItem },
    name: "VetMenu",
    props: {
      item: {
        type: Object,
        required: true,
      },
      fullPath: {
        type: String,
        default: "",
      },
    },
    setup(props) {
      const handleMenu = computed(() => {
        return props.item.children ? "VetSubMenu" : "VetMenuItem";
      });
  
      const handlePath = (routePath: string) => {
        return path.resolve(props.fullPath, routePath);
      };
      return {
        handleMenu,
        handlePath,
      };
    },
  });
  </script>
  
  <style scoped>
  </style>